<!-- 文章列表组件 -->
<script setup>
import { ref ,computed, watch, reactive} from "vue";
import {useUserStore} from '@/stores/user'
import { useRoute,useRouter } from "vue-router"
import { defineProps,defineEmits } from 'vue';
import _ from 'lodash';
const router = useRouter()
const route =useRoute()

//获取登录用户信息
const userStore = useUserStore()
const userInfo = userStore.userInfo
//当前页
const currentPage = 0
//图标大小
const size = ref(25)   

const props = defineProps({
    articleInfo:{
        type:Object,
        Required:true
    },
    isShowED:{
        type:Boolean,
        Required:true
    }
})
//为articleList赋值
const articles = ref({})
const pageInfo = ref({})
articles.value = props.articleInfo.articleList
pageInfo.value = props.articleInfo.pageInfo

watch(props.articleInfo,(newArticles)=>{
    articles.value = newArticles.articleList
    pageInfo.value = newArticles.pageInfo
})
const emit = defineEmits()
//点赞
let likeArr = ref([])
const onLike = (postId)=>{
    if(likeArr.value.includes(postId)){
        likeArr.value.forEach((item,index)=>{
            console.log(item===postId)
            if(item===postId){
                likeArr.value.splice(index,1)
            }
        })
    }else{
        likeArr.value.push(postId)
    }
    emit('clickLike',userInfo.id,postId)
}
//评论
const onComment = (postId)=>{
    emit('clickComment',postId)
}

</script>
<template>
    <div 
    class="article-box">
        <ul 
        class="article-list">
            <li  v-for="article in articles" :key="article.id"
            class="articles">
                <!-- 标题 文字内容 -->
                <el-head class="article">
                    <div class="head">
                        <el-avatar 
                        class="head-left"
                        @click="onComment(article.id)" 
                        :size="50" 
                        :src="article.user.avatar" />
                        <div class="head-right">
                            <h5 class="username">{{ article.user.username }}</h5>
                            <div class="time">{{ article.createdAt }}</div>
                        </div>
                    </div>
                    <h4 class="title">{{ article.title }}</h4>
                    <span class="content">{{ article.content }}</span>
                    
                </el-head>
                <!-- 图片 -->
                <div class="imgs">
                    <img 
                     v-for="img in article.images" :key="img.id"
                    class="img"
                    :src="img.imageUrl">
                </div>
                <!-- 浏览量 -->
                <div class="view-count">
                    <el-icon>
                        <View />
                    </el-icon>浏览
                    <span class="count">{{ article.viewCount }}次</span>
                </div>
                <!-- 点赞按钮 -->
                <div class="action">
                    <div class="like flex-h row"  @click="onLike(article.id)" :class="likeArr.includes(article.id)?'check':''" >
                        <div class="img-box" :class="article.isUp?'img-box-check':''">
                            <el-icon style="vertical-align: middle">
                               <img  src="@/assets/like.png">
                            </el-icon > 
                        </div>
                    </div>
                    <!-- 评论 -->
                    <div class="row">
                        <el-icon 
                        @click="onComment(article.id)"
                        style="vertical-align: middle">
                            <ChatLineSquare />
                        </el-icon>
                        <span class="count"> {{ article.comments.length }}</span>
                    </div>
                </div>
                <!-- 点赞人 -->
                <div v-if="article.likes.length"
                 class="like-peoples">
                    <span v-for="(user,index) in article.likes " :key="index"
                    class="count">
                    {{ user.user.username+' '}} 、
                    </span>等{{ article.likes.length }}人赞了
                </div>
                <HR></HR>
                <!-- 一级评论 -->
                <ul class="commests">
                    <li class="comment"
                    v-for="comment in article.comments" :key="comment.id"
                    >
                    <div class="head">
                        <h5 class="username">{{ comment.user.username }}:</h5>
                        <span class="content">{{ comment.content }}</span>
                    </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.article-box{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    .article-list{
        padding-left: 0px;
        height: 76vh;
        width: 100%;
        overflow: scroll;
        list-style: none;
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: space-around;
        .articles{
            width:90%;
            margin: 20px ;
            border-bottom-style:solid;
            border-color:var(--el-color-username);
            //background-color: rgb(255, 255, 255);
            border-radius: 10px;
            .article{
                .head{
                    display: flex;
                    align-items: flex-start;
                    justify-content: start;
                    .head-left{
                        margin: 20px 20px -15px 20px;
                    }
                    .head-right{
                        margin-top: 20px;
                        .username{
                            display: inline;
                            margin: 20px 0px 20px;
                        }
                        .time{
                            margin-top: 10px;
                            font-size: 15px;
                            color: rgb(175, 175, 175);
                        }
                    }
                }
                .title{
                    margin-left: 20px;
                }
                .content{
                    margin-left: 20px;
                }
            }
            .imgs{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin: 5px 20px;
                .img{
                    margin: 3px;
                    width: 200px;
                    height: 200px;
                }
            }
            .view-count{
                .el-icon{
                  margin-right: 5px;  
                }
                display: flex;
                align-items: center;
                margin-left: 20px;
                margin-top: 10px;
                font-size: 15px;
                color: rgb(175, 175, 175);
            }
            .action{
                display: flex;
                align-items: center;
                justify-content: end;
                margin-right: 20px;
               .like{
                border-radius: 60%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0px 0px 0px 0px var( --el-color-primary);
                    .img-box {
                    margin: 5px;
                    -moz-user-select: none;
                    -webkit-user-select: none;
                    -ms-user-select: none;
                    -khtml-user-select: none;
                    user-select: none; // 防止快速点击图片被选中，可不加。
                    & img {
                      width: 100%;
                      height: 100%;
                    }
                    }
                }
                .check {
                  -webkit-transition: box-shadow 0.5s;
                  -moz-transition: box-shadow 0.5s;
                  -o-transition: box-shadow 0.5s;
                  transition: box-shadow 0.5s;
                  box-shadow: 0px 0px 0px 1em rgba(226, 32, 44, 0);
                }
                .img-box-check {
                  animation: anm 0.5s;
                  -moz-animation: anm 0.5s;
                  -webkit-animation: anm 0.5s;
                  -o-animation: anm 0.5s;
                }
                @keyframes anm {
                  0% {
                    transform: scale(0);
                    -webkit-transform: scale(0);
                    -moz-transform: scale(0);
                  }
                  50% {
                    transform: scale(1.3);
                    -webkit-transform: scale(1.3);
                    -moz-transform: scale(1.3);
                  }
                  100% {
                    transform: scale(1);
                    -webkit-transform: scale(1);
                    -moz-transform: scale(1);
                  }
                }
                :nth-child(2){
                    margin: 10px ;
                }
                :nth-child(4){
                    padding-right: 10px;
                    margin: 10px ;
                }
              
            }
            .like-peoples{
                display: flex;
                align-items: center;
                margin-left: 20px;
                font-size: 18px;
            }
            .depart{
                width: 100%;
                border: 1px;
                border-block: floor($number: 0);
            }
            .commests{
                list-style: none;
                .comment{
                    .head{
                        display: flex;
                        align-items: flex-start;
                        justify-content: start;
                        margin: 20px 10px;
                        .username{
                            margin: 0px 0px 2px;
                        }
                        .content{
                            margin: 0px 10px;
                        }
                    }
                }
            }
        }
    }
}

::-webkit-scrollbar{
    display: none;
    background-color: aliceblue;
}
</style>